<template id='InviteFriend'>
  <div class="inviteFriend">
    <div class="pc">
      <p class="pcTitle">快来助力藏家获得一元购资格</p>
      <div class="pcInviteCode">
        <vue-qr :text="baseURL" :size="220"></vue-qr>
      </div>
      <div class="pcLink">邀请链接：{{ baseURL }}</div>
      <div class="pcInviteBtn" v-clipboard:copy="baseURL" v-clipboard:success="onCopy" v-clipboard:error="onError">
        点击复制连接
      </div>
    </div>
    <div class="phone">
      <div class="phoneContent">
        <p class="phoneTitle"></p>
        <p class="phoneDesc">助力藏家获得一元购资格</p>
        <div class="phoneQrCode">
          <vue-qr :text="baseURL" :size="220"></vue-qr>
        </div>
        <div class="phoneInviteLinkBox">
          <p class="phoneInviteLink">邀请链接：{{ baseURL }}</p>
          <div class="phoneInviteLinkBtn" v-clipboard:copy="baseURL" v-clipboard:success="onCopy"
            v-clipboard:error="onError"></div>
        </div>
      </div>
      <div class="phoneBottomBtn" @click="openPopupShare">邀请好友</div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { createOneBuyCodeApi, getUserInfoApi } from '@/api'
import { mapState } from "vuex";
import { Message } from "element-ui";
import { Toast } from "vant";
import { iscode } from '@/utils';
import vueQr from "vue-qr";
export default {
  name: "InviteFriend",
  components: { vueQr },
  // 定义属性
  data() {
    return {
      pcIcon: require("@/assets/images/invite/inviteFriendIcon.png"),
      phoneIcon: require("@/assets/images/invite/inviteFriendIcon.png"),
      baseURL: "",
      onebuy_code: "",
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(["equipment", 'userInfo']),
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    //一元购邀请好友生成二维码
    async createOneBuyCode() {
      let res = await createOneBuyCodeApi({
        goods_id: this.$route.query.goods_id
      })
      if (iscode(res)) {
        this.onebuy_code = res.result
        if (this.baseURL.indexOf('#/?onebuy_code=') == -1) {
          this.baseURL =
            this.baseURL + "#/?onebuy_code=" + this.onebuy_code + "&id=" + this.$route.query.goods_id;
        }
      }
    },
    getBaseUrl() {
      let url = window.location.href;
      if (url.indexOf("?code=") !== -1) {
        this.baseURL = window.location.href.split("?code=")[0];
      } else if (url.indexOf("?merchantId=") !== -1) {
        this.baseURL = window.location.href.split("?merchantId=")[0];
      } else {
        this.baseURL = window.location.href.split("#")[0];
      }
    },
    //复制链接
    onCopy() {
      if (!this.equipment.isPhone) {
        Message({
          message: "复制成功!",
          iconClass: "mySuccessIcon",
          customClass: "mySuccess",
        });
      } else {
        Toast("复制成功!");
      }
    },
    onError() {
      if (!this.equipment.isPhone) {
        Message({
          message: "复制失败请重试",
          iconClass: "myErrorIcon",
          customClass: "myError",
        });
      } else {
        Toast("复制失败请重试");
      }
    },
    openPopupShare() {
      this.$router.push({
        path: "/mail/inviteShare",
        query: { onebuy_code: this.onebuy_code, goods_id: this.$route.query.goods_id },
      });
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getBaseUrl();
    this.createOneBuyCode();
  },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='less' scoped>
.inviteFriend {
  margin-top: 30px;
  margin-bottom: 70px;

  p {
    margin: 0;
  }

  .pc {
    background: url("~@/assets/images/invite/inviteFriendBg.png");
    background-size: 100% 100%;
    width: 900px;
    height: 715px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .pcTitle {
      margin-top: 222px;
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }

    .pcInviteCode {
      margin-top: 34px;
      width: 220px;
      height: 220px;
    }

    .pcLink {
      margin-top: 30px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }

    .pcInviteBtn {
      margin-top: 30px;
      cursor: pointer;
      background: url("~@/assets/images/invite/inviteCodeBtn.png");
      background-size: 100% 100%;
      width: 345px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1e2020;
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .inviteFriend {
    margin: 0;

    .pc {
      display: none;
    }

    .phone {
      display: block;
      padding: 0 30px;
      background: #1e2020;
      padding-top: 130px;
      // padding-bottom: 220px;

      .phoneContent {
        background: url("~@/assets/images/invite/phoneFriendBg.png");
        background-size: 100% 100%;
        width: 100%;
        height: 1212px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        .phoneDesc {
          margin-top: 400px;
          font-size: 44px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }

        .phoneQrCode {
          width: 440px;
          height: 440px;
          margin-top: 100px;
        }

        .phoneInviteLinkBox {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 450px;
          margin-top: 80px;

          .phoneInviteLink {
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            width: 396px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .phoneInviteLinkBtn {
            background: url("~@/assets/images/invite/phoneCodeCopy.png");
            background-size: 100% 100%;
            width: 28px;
            height: 28px;
          }
        }

        .phoneBottom {
          position: absolute;
          left: 0;
          right: 0px;
          bottom: 0px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 40px;

          // margin-top: 220px;
          .phoneBottomInfo {
            .phoneBottomName {
              font-size: 36px;
              font-family: FZLTTHJW--GB1-0, FZLTTHJW--GB1;
              font-weight: normal;
              color: #ffffff;
            }

            .phoneBottomDesc {
              margin-top: 20px;
              width: 340px;
              font-size: 28px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #bbbbbb;
              line-height: 40px;
            }
          }


        }
      }

      .phoneBottomBtn {
        margin: 60px 0;
        width: 100%;
        height: 100px;
        background: url("~@/assets/images/invite/phoneLongBtn.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1e2020;
      }
    }
  }
}
</style>